<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<!-- JavaScript:核心语法+DOM(针对页面操作作)+BOM(针对浏览器)
			学习主体:针对页面操作比较多---DOM操作
			JQuery操作DOM:理解:JQ框架改变页面内容效果
			js基础就可以直接学习，了解函数使用
			基础函数----事件源之后出现，事件源语法糖中
			html()	作用:增加一个元素，覆盖原有html
			text()	作用：生成为文本内容
		 -->
		 <style>
			 div{
				 height: 300px;
				 width: 300px;
				 background-color: black;
			 }
		 </style>
	</head>
	<body>
		<!-- 鼠标单击按钮，然后改变下面产生一行文本 -->
		<button>按钮1</button>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nobis eligendi quo sed quisquam optio dolores impedit laborum totam, suscipit fuga aliquid nam soluta debitis quasi rerum, dolor ullam aspernatur.</p >
		<div></div>
		<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, commodi iste, necessitatibus et architecto molestiae exercitationem expedita dolor esse corporis sapiente ipsa! Eligendi facilis delectus amet iure, voluptatum dolorum fugit?</h3>
		<button>按钮2</button>
		<input type="button" value="按钮2" />
		<input type="text" />
	<script>
		$("button").click(function(){
			// JQ操作DOM--html()函数使用
			$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
		});
		/* 	练习1:div 200*200 背景颜色:黑色，鼠标滑过之后，
			下面内容修改:<h3>提示，修改为黄颜色
		 */
		$("div").mouseenter(function(){
			$('h3').html("<h3>黄颜色</h3>");
		 });
		 /* 练习2 按钮  文本框  点击按钮，文本框增加一行文本 */
		 $("input[type='button']").click(function(){
			 //alert("jq选择器是否选中");
			 $("input[type='text']").val("文本框内容修改");
		 });
		 /* 
			利用JQ操作DOM（页面效果）：           1.元素内容操作	（3个函数）
			                                     html()
												 val()
												 text()
												 属性操作		（4个函数）
												 attr()
												 removeAttr()
												 prop()
												 removeProp()
												 样式类名操作	（4个函数）
												 .demo{属性：属性值..}
												 addClass()
												 removeClass()
												 元素样式操作	（5个函数）
												 css()
												 语法：css("css属性","css属性值")
												  $("选择器").attr().addClass()
												 插入和删除操作	（7个函数）
												 元素遍历操作	（6个函数）
												 JQ动画操作		（7个函数）
		  */
	</script>
	</body>
</html>